<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<title>test1</title>
		<link rel="stylesheet" type="text/css" href="./css/test1.css" />
		<script src="../js/jquery.js" type="text/javascript"></script>
	</head>
	<body>
		<div class="mainbody middle">
			<form class="form-box front">
				<div class="title">
					<h1>SIGN IN</h1>
				</div>
				<div>
					<input class="input-normal" type="text" placeholder="UserAccount" />
					<input class="input-normal" type="password" placeholder="PassWord" />
					<button class="btn-submit" type="submit"> Sign in </button>
				</div>
				<div>
					<p style="margin-top: 40px">If you don't have account.Please</p>
					<p>Click here to <a id="signup" href="#">Sign Up</a></p>
				</div>
			</form>

			<form class="form-box back">
				<div class="title">
					<h1>SIGN UP</h1>
				</div>
				<div>
					<input class="input-normal" type="text" placeholder="UserAccount" />
					<input class="input-normal" type="password" placeholder="PassWord" />
					<button class="btn-submit" type="submit"> Sign up </button>
				</div>
				<div>
					<p style="margin-top: 40px">Have a account ? You can</p>
					<p>Click here to <a id="signin" href="#">Sign in</a></p>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			$("#signup").click(function(){
				console.log("Hello signin");
				$(".middle").toggleClass("middle-flip");
			});
			$("#signin").click(function(){
				console.log("Hello login");
				$(".middle").toggleClass("middle-flip");
			});
		</script>
	</body>
</html>
